<!-- <template>
  <div class="address-list">
    <div v-for="(address, index) in normalizedData" :key="index" class="address-item">
      <span class="address-text">{{ formatAddress(address) }}</span>
      <el-tooltip content="复制" placement="top">
        <el-button 
          circle 
          size="small"
          :disabled="!address"
          style="border: none;"
          @click.stop="copyToClipboard(address)"
          class="custom-link-button"
        >
          <el-icon><CopyDocument /></el-icon>
        </el-button>
      </el-tooltip>
      <span v-if="index < normalizedData.length - 1" class="separator">, </span>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import { CopyDocument } from '@element-plus/icons-vue';

export default {
  name: 'AddressListWithCopy',
  components: { CopyDocument },
  props: {
    // 接收地址数组
    data: {
      type: [Array, String, Object],
      default: () => []
    },
    // 地址显示的最大长度
    maxLength: {
      type: Number,
      default: 12
    }
  },
  computed: {
    // 规范化数据格式，确保总是返回数组
    normalizedData() {
      if (Array.isArray(this.data)) {
        return this.data;
      }
      
      // 处理字符串形式的数组
      if (typeof this.data === 'string') {
        try {
          // 尝试解析 JSON 字符串
          if (this.data.startsWith('[') && this.data.endsWith(']')) {
            const parsed = JSON.parse(this.data);
            return Array.isArray(parsed) ? parsed : [this.data];
          }
          // 处理逗号分隔的字符串
          if (this.data.includes(',')) {
            return this.data.split(',').map(item => item.trim());
          }
          return [this.data];
        } catch {
          return [this.data];
        }
      }
      
      // 处理其他类型（如对象、null、undefined等）
      return this.data ? [String(this.data)] : [];
    }
  },
  methods: {
    // 格式化地址显示
    formatAddress(address) {
      if (!address) return '';
      
      // 如果地址是字符串形式的数组，尝试解析
      if (address.startsWith('[') && address.endsWith(']')) {
        try {
          const parsed = JSON.parse(address);
          if (Array.isArray(parsed)) {
            return this.cutMiddle(parsed[0], Math.floor(this.maxLength / 2), Math.floor(this.maxLength / 2));
          }
        } catch {
          // 解析失败则按原字符串处理
        }
      }
      
      return this.cutMiddle(address, Math.floor(this.maxLength / 2), Math.floor(this.maxLength / 2));
    },
    
    // 截断地址中间部分
    cutMiddle(text = '', left = 6, right = 6) {
      if (typeof text !== 'string') return '';
      
      text = text.trim();
      if (text.length <= left + right) return text;
      return `${text.substring(0, left)}...${text.substring(text.length - right)}`;
    },
    
    // 复制单个地址到剪贴板
    copyToClipboard(address) {
      if (!address) return;
      
      // 处理字符串形式的数组地址
      let copyText = address;
      if (address.startsWith('[') && address.endsWith(']')) {
        try {
          const parsed = JSON.parse(address);
          if (Array.isArray(parsed) && parsed.length > 0) {
            copyText = parsed[0];
          }
        } catch {
          // 解析失败则使用原地址
        }
      }
      
      navigator.clipboard
        .writeText(copyText)
        .then(() => {
          ElMessage.success('复制成功');
        })
        .catch((error) => {
          console.error('复制失败:', error);
          ElMessage.error('复制失败，请稍后重试');
        });
    }
  }
};
</script>

<style scoped lang="less">
.address-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.address-item {
  display: inline-flex;
  align-items: center;
}

.address-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

.separator {
  margin: 0 2px;
}

.custom-link-button {
  color: skyblue;
  text-decoration: none;
  font-size: 16px;
  margin-left: 4px;
}
</style> -->

<template>
  <div class="address-list">
    <div v-for="(address, index) in normalizedData" :key="index" class="address-item">
      <span class="address-text">{{ formatAddress(address) }}</span>
      <el-tooltip content="复制" placement="top">
        <el-button 
          circle 
          size="small"
          :disabled="!address"
          style="border: none;"
          @click.stop="copyToClipboard(address)"
          class="custom-link-button"
        >
          <el-icon><CopyDocument /></el-icon>
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import { CopyDocument } from '@element-plus/icons-vue';

export default {
  name: 'AddressListWithCopy',
  components: { CopyDocument },
  props: {
    // 接收地址数组
    data: {
      type: [Array, String, Object],
      default: () => []
    },
    // 地址显示的最大长度
    maxLength: {
      type: Number,
      default: 12
    }
  },
  computed: {
    // 规范化数据格式，确保总是返回数组
    normalizedData() {
      if (Array.isArray(this.data)) {
        return this.data;
      }
      
      // 处理字符串形式的数组
      if (typeof this.data === 'string') {
        try {
          // 尝试解析 JSON 字符串
          if (this.data.startsWith('[') && this.data.endsWith(']')) {
            const parsed = JSON.parse(this.data);
            return Array.isArray(parsed) ? parsed : [this.data];
          }
          // 处理逗号分隔的字符串
          if (this.data.includes(',')) {
            return this.data.split(',').map(item => item.trim());
          }
          return [this.data];
        } catch {
          return [this.data];
        }
      }
      
      // 处理其他类型（如对象、null、undefined等）
      return this.data ? [String(this.data)] : [];
    }
  },
  methods: {
    // 格式化地址显示
    formatAddress(address) {
      if (!address) return '';
      
      // 如果地址是字符串形式的数组，尝试解析
      if (address.startsWith('[') && address.endsWith(']')) {
        try {
          const parsed = JSON.parse(address);
          if (Array.isArray(parsed)) {
            return this.cutMiddle(parsed[0], Math.floor(this.maxLength / 2), Math.floor(this.maxLength / 2));
          }
        } catch {
          // 解析失败则按原字符串处理
        }
      }
      
      return this.cutMiddle(address, Math.floor(this.maxLength / 2), Math.floor(this.maxLength / 2));
    },
    
    // 截断地址中间部分
    cutMiddle(text = '', left = 6, right = 6) {
      if (typeof text !== 'string') return '';
      
      text = text.trim();
      if (text.length <= left + right) return text;
      return `${text.substring(0, left)}...${text.substring(text.length - right)}`;
    },
    
    // 复制单个地址到剪贴板
    copyToClipboard(address) {
      if (!address) return;
      
      // 处理字符串形式的数组地址
      let copyText = address;
      if (address.startsWith('[') && address.endsWith(']')) {
        try {
          const parsed = JSON.parse(address);
          if (Array.isArray(parsed) && parsed.length > 0) {
            copyText = parsed[0];
          }
        } catch {
          // 解析失败则使用原地址
        }
      }
      
      navigator.clipboard
        .writeText(copyText)
        .then(() => {
          ElMessage.success('复制成功');
        })
        .catch((error) => {
          console.error('复制失败:', error);
          ElMessage.error('复制失败，请稍后重试');
        });
    }
  }
};
</script>

<style scoped lang="less">
.address-list {
  display: flex;
  flex-direction: column; /* 改为垂直布局 */
  gap: 4px; /* 保持行间距 */
}

.address-item {
  display: flex;
  align-items: center;
  width: 100%; /* 确保每项占满整行 */
}

.address-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

.custom-link-button {
  color: skyblue;
  text-decoration: none;
  font-size: 16px;
  margin-left: 4px;
}
</style>